<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>聊天室</title>
    <link rel="stylesheet" href="./css/private_message.css">
</head>

<body>

    <!-- 导航栏 -->
    <div class="nav">
        <img src="img/logo.jpg" alt="">
        <span class="title">我的博客系统</span>
        <!-- 用来占据中间位置 -->
        <span class="spacer" style="width: 50%;"></span>

        <a href="blog_list.html">博客广场</a>
        <a href="myblog_list.html">个人博客</a>
        <a href="personal_center.html">个人中心</a>
        <a href="my_relation_following.html">我的关注/粉丝</a>
        <a href="draft_list.html">我的草稿</a>
        <a href="blog_add.html">写博客</a>
        <a href="javascript:logout()">注销</a>
    </div>

    <!-- 这个 div 作为整个界面的总的容器 -->
    <div class="chat-container">
        <!-- 中间的聊天区域 -->
        <div class="main">
            <!-- 左侧区域, 显示好友列表和会话列表 -->
            <div class="left">
                <!-- 当前登录用户的用户名 -->
                <div class="user" id="login-user">
                    <img id="avatar-img" src="img/avatar.png" class="avatar-img" alt="Avatar">
                    <h3 class="username" id="author">赵六</h3>
                </div>


                <!-- 会话列表 -->
                <ul class="list" id="session-list">
                    <!-- 根据数据库动态显示 -->
                    <!-- <li message-session-id=1>
                        <img class="avtar-session-user" src="img/avatar.png" alt="Avatar">
                        <h3 class="username" user-id="1">张三</h3>
                    </li>

                    <li class="selected" message-session-id="2">
                        <img class="avtar-session-user" src="img/avatar.png" alt="Avatar">
                        <h3 class="username" user-id="2">李四</h3>
                    </li>

                    <li message-session-id="3">
                        <img class="avtar-session-user" src="img/avatar.png" alt="Avatar">
                        <h3 class="username" user-id="1">王五</h3>
                    </li> -->

                </ul>

            </div>
            <!-- 右侧区域, 显示聊天编辑框 -->
            <div class="right">
                <!-- 会话标题 -->
                <div class="title">在线聊天室</div>
                <div class="message-show">
                    <!-- 根据数据库动态显示 -->
                    <!-- <div class="message message-left">
                        <div class="box-header">
                            <img class="avtar-session-user" src="img/avatar.png" alt="Avatar">
                            <span style="color: green;">2023-08-24</span>
                        </div>
                        <div class="box">
                            <p>在吗？</p>
                        </div>
                    </div>
                    <div class="message message-right">
                        <div class="box-header">
                            <span style="color: green;">2023-08-24</span>
                            <img class="avtar-session-user" src="img/avatar.png" alt="Avatar">
                        </div>
                        <div class="box">
                            <p>在的。</p>
                        </div>
                    </div> -->
                </div>
                <!-- 消息编辑框 -->
                <textarea class="message-input"></textarea>
                <!-- 发送按钮 -->
                <div class="ctrl">
                    <button>发送</button>
                </div>
            </div>
        </div>
    </div>

    <script src="./js/jquery.min.js"></script>
    <script src="./js/logout.js"></script>
    <script src="./js/urltools.js"></script>
    <script src="./js/private_message.js"></script>

</body>

</html>